<template>
  <el-dialog
      title="个人信息"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      :close-on-click-modal="false"
      width="40%"
			>
      <el-form
        :model="dataForm"
        ref="dataForm"
        size="small"
        disabled
        label-width="80px">
        <el-form-item
          label="账号"
          prop="account">
          <el-input
            v-model="dataForm.account"
            placeholder="请输入账号"
            disabled
            :clearable="true"/>
        </el-form-item>

        <el-form-item
          label="昵称"
          required
          prop="name">
          <el-input
            v-model="dataForm.name"
            placeholder="请输入昵称"
            :clearable="true"/>
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              label="性别"
              prop="sex">
              <el-select
                v-model="dataForm.sex"
                placeholder="请选择"
                value="">
                <el-option
                  v-for="item in sexOption"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              label="生日"
              prop="birthday">
              <el-date-picker
                v-model="dataForm.birthday"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width: 100%;">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item
          label="手机号"
          prop="phone">
          <el-input
            v-model="dataForm.phone"
            placeholder="请输入手机号"
            :clearable="true"/>
        </el-form-item>

        <el-form-item
          label="邮箱"
          prop="email">
          <el-input
            type="email"
            v-model="dataForm.email"
            placeholder="请输入邮箱"
            :clearable="true"/>
        </el-form-item>

				<el-form-item
          label="所属部门"
          prop="deptId">
          <treeselect
            v-model="dataForm.deptId"
            :clearable="true"
            :disabled='true'
            placeholder="请选择上级部门"
            noChildrenText="不好意思哟~,没有下一级了~~"
            :normalizer="normalizer"
            :options="deptData"/>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button
          @click="dialogVisible = false"
          size="small">关 闭</el-button>
        <!-- <el-button
          type="primary"
          :loading="dialogLoading"
          @click="submitForm"
          size="small">修改</el-button> -->
      </div>
    </el-dialog>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getUserInfo, updateUserInfo, getTreeDept, queryUserRoles } from '@/api/auth/user'
import { getAuthGroupList } from '@/api/auth/group'
export default {
  props: {
    userId: {
      type: String,
      default: ''
    }
  },
  components:{
    Treeselect
	},
  data () {
    return {
      dialogVisible: false,
      dialogLoading: false,
      sexOption: [
        { name: '男', value: '1' },
        { name: '女', value: '2' }
			],
      deptData: [],
      // 新增编辑界面数据
			dataForm: {
				userId: '',
        account: '',
        name: '',
				deptId: null,
        birthday: null,
        email: '',
        phone: '',
        sex: '',
        status: '0'
      },
      normalizer(node) {
        return {
          // id: node.fullName,
          label: node.fullName
        }
      }
    }
  },
  created () {
  },
  methods: {
    init(flag) {
      this.findDeptTree()
      this.dialogVisible = flag
      getUserInfo().then(res => {
        if (res.code === 200) {
          console.log(res)
          this.dialogVisible = flag
          res.data.birthday = res.data.birthday ? new Date(res.data.birthday) : null
          this.dataForm = res.data
          // this.dataForm.deptId = res.data.fullName
        }
      })
    },
    // 获取部门
    // 获取部门列表
		async findDeptTree() {
			await getTreeDept().then((res) => {
        if (res.code === 200) {
          this.deptData = res.data
        }
			})
		},
    submitForm() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          updateUserInfo(this.dataForm).then(res => {
          })
        }
      })
    }
  }
}
</script>